<template>
  <div class="comment-item">
    <div class="comment-left">
      <el-avatar :size="40" :src="comment.imgpath"
        @error="() => true">
        <el-avatar :size="40"> {{ comment.name }} </el-avatar>
      </el-avatar>

      <!-- <el-avatar v-if="comment.imgpath !== ''" :src="comment.imgpath" :size="40"></el-avatar>
      <el-avatar v-else :size="40"> {{ comment.name }} </el-avatar> -->
    </div>
    <div class="comment-right">
      <div class="comment-top">
        <span class="head">
          {{ comment.name }}
        </span>
        <span class="comment-location" v-if="floor !== -1">#{{ floor }}</span>
      </div>

      <p class="commnet-content">{{ comment.content }}</p>
      <div class="bottom">
        <span class="time">{{ comment.time }}</span>
        <el-link icon="el-icon-edit" @click.prevent="showCommentAdd = !showCommentAdd" class="link">{{ showCommentAdd ?
            "收起回复" :
            "回复评论"
        }}</el-link>
        <el-link icon="el-icon-s-comment" v-if="comment.children && comment.children.length"
          @click.prevent="showCommentDetail = !showCommentDetail" class="link">{{ showCommentDetail ? "折叠评论" : "展开评论" }}
        </el-link>
        <!-- <el-link icon="el-icon-delete" type="danger" @click="handleDelete" class="link">删除评论</el-link> -->
      </div>

      <el-collapse-transition>
        <CommentAdd v-if="showCommentAdd" :parentId="comment.id" @handleCommentAddClose="closeCommentAdd" />
      </el-collapse-transition>

      <el-collapse-transition>
        <div v-show="showCommentDetail">
          <CommentList v-if="comment.children && comment.children.length" :commentsList="comment.children" />
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import CommentAdd from "./CommentAdd.vue";
// const CommentList = () => import("./CommentList.vue"); 

export default {
  name: "CommentItem",
  components: {
    CommentAdd,
    CommentList: defineAsyncComponent(() => import("./CommentList.vue")),
  },
  data() {
    return {
      showCommentAdd: false,
      showCommentDetail: false,
    };
  },
  props: {
    comment: {
      type: Object,
      default: () => { return {} },
    },
    floor: {
      type: Number,
      default: -1,
    },
  },
  methods: {
    showCommentAddFun() {
      this.showCommentAdd = true;
    },
    closeCommentAdd() {
      this.showCommentAdd = false;
    },
    changeCommentAdd() {
      this.showCommentAdd = !this.showCommentAdd;
    },
    // handleDelete() {
    //   console.log("delete")
    //   console.log(this.comment.id)
    //   this.$store.commit("deleteComment", this.comment);
    // }
  },
};
</script>

<style scoped>
.comment-item {
  margin: 5px 0;
  display: flex;
  flex-direction: row;
}

.comment-left {
  margin: 3px 16px 3px 0;
}

.comment-right {
  flex: 1;
}

.comment-top {
  display: flex;
  flex-direction: row;
  /* font-size: 1.2em; */

}

.comment-location {
  flex: 1;
  text-align: right;
  color: red;
}

.head {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
  word-wrap: break-word;
  font-size: 12px;
  line-height: 18px;
  box-sizing: border-box;
  text-decoration: none;

  color: #00000073;
}

.head span {
  cursor: pointer;
}

.bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  color: #99a2aa;
}

.link {
  margin: 0 10px 0 0;
}

.reply {
  text-decoration: underline;
  color: #aca9a9;
  cursor: pointer;
}

.time {
  margin-right: 10px;
}

.commnet-content {
  font-size: 14px;
  line-height: 16px;
  font-feature-settings: "tnum";
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
  color: #000000d9;
  font-size: 14px;
  word-wrap: break-word;
  box-sizing: border-box;
  margin-bottom: inherit;
  white-space: pre-wrap;
  margin: 4px 0;
}
</style>